<template>
  <div class="mContainer">
    <div class="header-container">
      <span class="header-left-span">站点详情</span>
    </div>

    <div class="site-container">
      <img class="site-icon" src="../../assets/image/site-icon.png"/>
      <span>{{siteDetailsData.name}}</span>
    </div>

    <div class="route-container">
      <span class="line"></span>
      <span class="name">途经路线</span>
    </div>

    <div class="route-item" v-for="item in siteDetailsData.routeList">
      <div class="route-item-container" v-on:click="lineDetails(item.routeName, item.direction, item.areacode, item.updown)">
        <img class="route-item-bus" src="../../assets/image/bus-icon.png"/>
        <span class="route-item-name">{{item.routeName}}</span>

        <span class="route-item-direction">{{item.direction}}</span>
        <img class="route-item-arrow" src="../../assets/image/right-arrow-icon.png"/>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        siteDetailsData: {}
      };
    },

    methods: {
      lineDetails: function (routeName, direction, areacode, updown) {
        var data = {};
        data.areacode = areacode;
        data.routeName = routeName;
        data.direction = direction;
        data.updown = updown;
        this.$storage.setStorage('lineDetails', data);

        var routerPath = '/lineDetails';
        this.$router.push({path: routerPath});
      }
    },

    created () {
      let vueObj = this;
      var param = this.$storage.getStorage('searchSiteDetailParam');
      this.$baseService.getData(vueObj.$global.API_GET_SITE_INFO, param, function (data) {
        vueObj.siteDetailsData = Object.assign({}, vueObj.siteDetailsData, data);
      });
      // this.$storage.setStorage('searchSiteDetailParam', null);
      if (this.$storage.setStorage('intervalID')) {
        clearInterval(this.$storage.setStorage('intervalID'));
      }
    }
  };
</script>

<style scoped>
  .mContainer{
    background-color: #F4F4F4;
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .site-container{
    display: flex;
    flex-direction: row;
    background-color: white;
    width: 100%;
  }

  .site-icon{
    margin-left: 0.4rem;
    width: 0.37rem;
    height: 0.48rem;
    align-self: center;
  }

  .site-container span{
    margin-left: 0.21rem;
    font-size: 0.42rem;
    color: #333333;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
  }

  .route-container{
    margin-top: 0.26rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: white;
    border-bottom: 1px solid #f7f7f7;
  }

  .route-container .line{
    width: 0.08rem;
    height: 0.37rem;
    background-color: #FE952C;
    margin-top: 0.45rem;
  }

  .route-container .name{
    padding-left: 0.29rem;
    padding-top: 0.4rem;
    padding-bottom: 0.26rem;
    font-size: 0.37rem;
    color: #333333;
    line-height: 0.58rem;
  }

  .route-item{
    background-color: white;
  }

  .route-item-container{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-left: 0.4rem;
  }

  .route-item-bus{
    width: 0.42rem;
    height: 0.42rem;
    align-self: center;
  }

  .route-item-name{
    padding-left: 0.21rem;
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    flex: 1;
  }

  .route-item-arrow{
    width: 0.21rem;
    height: 0.37rem;
    align-self: center;
    margin-right: 0.4rem;
  }

  .route-item-direction{
    padding-left: 0.21rem;
    font-size: 0.37rem;
    color: #333333;
    margin-right: 0.26rem;
    align-self: center;
  }

</style>
